<template>
  <div class="w-full h-auto flex flex-col items-center bg-#F8F8F8 rounded-bottom overflow-hidden">
    <div class="w-full h-[fit-content] bg-white flex flex-col items-center">
      <div
        class="w-full min-h-100vh px-18px box-border flex flex-col items-center"
        v-if="zoneList.length > 0"
      >
        <div
          class="mt-18px w-660px h-[fit-content] flex flex-col group"
          v-for="zone in zoneList"
          :key="zone.id"
        >
          <div class="w-full h-44px flex flex-row items-center">
            <div style="width: 44px; height: 44px">
              <img
                class="w-44px h-44px group-hover:scale-103 transition rounded-50%"
                :src="zone.header_img"
                style="height: 44px"
              />
            </div>
            <div class="ml-10px h-44px flex-1">
              <div class="mt-2px h-16px leading-16px text-16px text-#333333">
                {{ zone.nick_name }}
              </div>
              <div class="mt-8px h-12px leading-12px text-12px text-#999999">
                {{ dayjs(zone.created_at).format('YYYY-MM-DD HH:mm') }}
              </div>
            </div>
          </div>
          <div class="mt-4px ml-54px w-608px h-[fit-content]">
            <div class="w-608px text-14px leading-18px text-#333333 break-all">
              {{ zone.content }}
            </div>
            <img
              v-if="zone.media_url"
              :src="zone.media_url"
              alt=""
              class="mt-12px w-[90%] max-w-608px h-[fit-content] object-cover rounded-12px max-h-500px"
            />
            <div class="mt-12px mb-18px flex flex-row">
              <div class="mr-42px cursor-pointer flex flex-row items-center">
                <img
                  :src="likeFillIcon"
                  alt=""
                  class="w-22px h-20px"
                  @click="handleCancelLike(zone.id)"
                  v-if="zone.liked"
                />

                <template v-else>
                  <AuthComponents @onClick="handleLike(zone.id)">
                    <img :src="likeIcon" alt="" class="w-22px h-20px" />
                  </AuthComponents>
                </template>

                <div class="ml-6px h-14px text-14px leading-14px text-#999999">
                  {{ zone.like_count }}
                </div>
              </div>
              <div
                class="mr-42px cursor-pointer flex flex-row items-center"
                @click="handleComment(zone)"
              >
                <img src="@/assets/comment.png" alt="" class="w-22px h-20px" />
                <div class="ml-6px h-14px text-14px leading-14px text-#999999">
                  {{ zone.comment_count }}
                </div>
              </div>
              <div class="mr-42px cursor-pointer flex flex-row items-center">
                <img src="@/assets/sayhi.png" alt="" class="w-22px h-20px" />
                <div class="ml-6px h-14px text-14px leading-14px text-#999999">打聲招呼</div>
              </div>
            </div>
          </div>
        </div>
        <LoadMore
          :total="total"
          :loading="loading"
          :pageInfo="pageInfo"
          @loadMore="handleLoadMore"
        />
      </div>
      <Empty v-else title="用户未发布动态" />
    </div>
  </div>
  <CommentModal
    v-model:visible="commentModalVisible"
    :zone="selectZone"
    @updateZone="handleUpdateZone"
    @clickLick="handleLike"
    @clickCancel="handleCancelLike"
  />
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import dayjs from 'dayjs'
import { getZoneList, likeZone, cancelLikeZone } from '@/api/zone'
import likeIcon from '@/assets/like.png'
import AuthComponents from '@/components/authComponents/index.vue'
import likeFillIcon from '@/assets/like_fill.png'
import CommentModal from '@/views/zone/components/comment-modal.vue'
import { useRoute } from 'vue-router'
import Empty from '@/components/empty/index.vue'
import LoadMore from '@/components/loadMore/index.vue'
const route = useRoute()
const userId = Number(route.params.id)
const total = ref(0)
const bagePageInfo = {
  page: 0,
  pageSize: 10
}
const pageInfo = ref(bagePageInfo)
const loading = ref(false)
const handleLoadMore = () => {
  loading.value = true
  getData().finally(() => {
    loading.value = false
  })
}
const zoneList = ref([])
const selectZoneId = ref(null)
const selectZone = computed(() => {
  return zoneList.value.find((item) => item.id === selectZoneId.value) || {}
})
const commentModalVisible = ref(false)

const handleComment = (zone) => {
  selectZoneId.value = zone.id
  commentModalVisible.value = true
}
const handleUpdateZone = (zone) => {
  zoneList.value.forEach((item) => {
    if (item.id === zone.id) {
      item = Object.assign(item, zone)
    }
  })
}
const handleLike = (id) => {
  likeZone(id).then((res) => {
    zoneList.value.forEach((item) => {
      if (item.id === id) {
        item.liked = true
        item.like_count = res
      }
    })
  })
}
const handleCancelLike = (id) => {
  cancelLikeZone(id).then((res) => {
    zoneList.value.forEach((item) => {
      if (item.id === id) {
        item.liked = false
        item.like_count = res
      }
    })
  })
}
const getData = () => {
  return getZoneList({
    page: pageInfo.value.page + 1,
    pageSize: pageInfo.value.pageSize,
    id: userId
  }).then((res) => {
    pageInfo.value.page = res.page
    pageInfo.value.pageSize = res.pageSize
    zoneList.value = [...zoneList.value, ...(res.list || [])]
    total.value = res.total
  })
}
onMounted(() => {
  getData()
})
</script>
<style lang="less" scoped>
.rounded-bottom {
  border-radius: 0 0 16px 16px;
}
</style>
